<template>
    <div class="confirm">
        <div class="confirm-con">
        <Card icon="log-in" title="设置新密码" :bordered="false">
            <Form ref="confirmForm" :model="form" :rules="rules">
                <FormItem prop="password">
                    <Input type="password" v-model="form.password" placeholder="请输入密码">
                        <span slot="prepend">
                            <Icon :size="14" type="md-lock"></Icon>
                        </span>
                    </Input>
                </FormItem>
                <FormItem prop="passwdCheck">
                    <Input type="password" v-model="form.passwdCheck" placeholder="请输入确认新密码">
                        <span slot="prepend">
                            <Icon :size="14" type="md-lock"></Icon>
                        </span>
                    </Input>
                </FormItem>
                <FormItem>
                <Button  type="primary" @click="confirm"  long>确认</Button>
                </FormItem>
            </Form>
        </Card>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.form.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.confirmForm.validateField('passwdCheck')
        }
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.form.password) {
        callback(new Error('2次输入密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      form: {
        password: '',
        passwdCheck: ''
      },
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        passwdCheck: [{ validator: validatePassCheck, trigger: 'blur' }]
      }
    }
  },
  methods: {
    confirm () {
      this.$refs.confirmForm.validate(valid => {
        if (valid) {
          this.$router.push({
            name: 'login'
          })
        }
      })
    }
  },
  mounted () {
    this.$Message.config({
      top: 250
    })
  }
}
</script>

<style lang="less">
.confirm {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/bg-bank.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  .confirm-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
  }
}
</style>
